<template>
  <div>
    <a-button type="primary" @click="showModal" :disabled="disbtn">
      模拟支付
    </a-button>
    <a-modal v-model="visible" title="Title" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          已支付
        </a-button>
      </template>
      <div>{{ calImg }}</div>
    </a-modal>
  </div>
</template>
<script>
  import { buildQrCodebyUserId } from '@/api/book'
  export default {
    props: {
      dispayable: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        loading: false,
        visible: false,
        imgdata: '',
        user: {},
        disbtn: false
      }
    },
    watch: {
      dispayable: {
        handler () {
          console.log('********************handler*************************')
          this.setdisable()
        }
      },
      immediate: true
    },
    computed: {
      calImg () {
        console.log('********************calImg*********************')
        console.log('******************** this.imgdata *********************')
        return `<img :src="'data:image/png;base64,'+${this.imgdata}" alt="">`
      }
    },
    methods: {
      setdisable () {
        this.disbtn = true
      },
      showModal () {
        setTimeout(() => {
          buildQrCodebyUserId(this.user.id).then(res => {
            console.log('**************buildQrCodebyUserId***************')
            console.log(res.result)
            const imgdata = res.result
            if (imgdata.length === 0) {
              this.$message.error('支付失败')
            } else {
              this.imgdata = imgdata
              this.visible = true
            }
          }).catch(error => {
            if (error.response && error.response.status === 403) {
              this.$message.error('api请求方式错误')
            }
            if (error.response && error.response.status === 404) {
              this.$message.error('api未找到')
            }
            if (error.response && error.response.status === 500) {
              this.$message.error('服务器内部错误')
            }
          })
        }, 100)
      },
      handleOk (e) {
        var self = this
        this.loading = true
        setTimeout(() => {
          this.visible = false
          this.loading = false
          self.$emit('payfinished', true)
        }, 3000)
      },
      handleCancel (e) {
        this.visible = false
      }
    },
    created () {
      this.user = this.$store.getters.userInfo
    }
  }
</script>
